<script setup lang="ts">
import {useTurnStore} from '@/stores/turn.ts'

const turnStore = useTurnStore()

</script>

<template>
<div class="dialog"  v-if="turnStore.showOfDialog">
   <div class="dialog-header">
     <h3 class="dialog-title">判决书详情</h3>
     <span class="close" @click="turnStore.showOfDialog = false" ><el-icon><Close /></el-icon></span>
   </div>
   <div class="dialog-content" v-if="turnStore.showOfDialog">
     <div class="info-section">
       <div class="info-group">
         <div class="info-item">
           <span class="label">案件号</span>
           <span class="value">{{ turnStore.dialogVisible?.caseNumber }}</span>
         </div>
         <div class="info-item">
           <span class="label">案件名称</span>
           <span class="value">{{ turnStore.dialogVisible?.caseName }}</span>
         </div>
         <div class="info-item">
           <span class="label">案件类型</span>
           <span class="value">{{ turnStore.dialogVisible?.caseType }}</span>
         </div>
       </div>
       
       <div class="info-group">
         <div class="info-item">
           <span class="label">法院名称</span>
           <span class="value">{{ turnStore.dialogVisible?.court }}</span>
         </div>
         <div class="info-item">
           <span class="label">审理程序</span>
           <span class="value">{{ turnStore.dialogVisible?.hearingProcedure }}</span>
         </div>
         <div class="info-item">
           <span class="label">当事人</span>
           <span class="value">{{ turnStore.dialogVisible?.party }}</span>
         </div>
       </div>

       <div class="info-group">
         <div class="info-item">
           <span class="label">判决时间</span>
           <span class="value">{{ turnStore.dialogVisible?.adjudicationTime }}</span>
         </div>
         <div class="info-item">
           <span class="label">开庭时间</span>
           <span class="value">{{ turnStore.dialogVisible?.openTime }}</span>
         </div>
       </div>

       <div class="info-group">
         <div class="info-item">
           <span class="label">判决书来源</span>
           <a class="value link" :href="turnStore.dialogVisible?.source" target="_blank">{{ turnStore.dialogVisible?.source }}</a>
         </div>
         <div class="info-item">
           <span class="label">判决书链接</span>
           <a class="value link" :href="turnStore.dialogVisible?.url" target="_blank">{{ turnStore.dialogVisible?.url }}</a>
         </div>
       </div>

       <div class="info-group full-width">
         <div class="info-item">
           <span class="label">法律依据</span>
           <span class="value">{{ turnStore.dialogVisible?.legalBasis }}</span>
         </div>
       </div>

       <div class="info-group full-width">
         <div class="info-item">
           <span class="label">判决书全文</span>
           <div class="value full-text">{{ turnStore.dialogVisible?.fullText }}</div>
         </div>
       </div>
     </div>
   </div>
 </div>
</template>

<style scoped lang="scss">
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 900px;
  max-height: 80vh;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.dialog-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.close {
  cursor: pointer;
  font-size: 20px;
  color: #909399;
  transition: color 0.3s;
  
  &:hover {
    color: #f5222d;
  }
}

.dialog-content {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
  
  &::-webkit-scrollbar {
    width: 6px;
  }
  
  &::-webkit-scrollbar-thumb {
    background-color: #dcdfe6;
    border-radius: 3px;
  }
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.info-group {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 16px;
  background-color: #f8f9fa;
  border-radius: 8px;
  
  &.full-width {
    .info-item {
      width: 100%;
    }
  }
}

.info-item {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.label {
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.value {
  font-size: 14px;
  color: #303133;
  line-height: 1.5;
  
  &.link {
    color: #409eff;
    text-decoration: none;
    word-break: break-all;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

.full-text {
  white-space: pre-wrap;
  line-height: 1.6;
  padding: 12px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
}
</style>
